<template>
  <div ref="container">
    <van-tabs v-model="active" swipeable sticky @click="onClickTables(active + 1)">
      <van-tab v-for="(item, index) in datatable" :title="item.name" :key="index">
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- <p>左右滑动,下拉刷新</p> -->
          <template>
            <van-row type="flex" justify="space-between">
              <van-row span="2" class="redtime"> 秒杀倒计时 </van-row>
              <van-col span="16">
                <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
              </van-col>
            </van-row>
          </template>
          <template>
            <!-- 每个元素的两侧间隔相等 -->
            <van-row type="flex">
              <van-col span="11" v-for="proitem in dataCatogerylist" :key="proitem.id">
                <!-- 每一个列项 -->
                <van-card
                  num="1088"
                  tag="New"
                  :price="proitem.price"
                  :desc="proitem.detail"
                  :title="proitem.product"
                  :thumb="proitem.picture"
                  :origin-price="proitem.oldprice"
                  @click="getDetail(proitem.id)"
                >
                </van-card>
                <div class="newpro-item">
                  <div class="redpre">
                    新品秒杀
                    <van-icon name="fire" />
                    <van-icon name="hot-o" />
                  </div>
                  <div class="shopcart" @click="updatecart(proitem.id)">
                    <van-icon v-if="proitem.putaway" name="cart-o" />
                    <van-icon v-if="!proitem.putaway" name="cart" />
                  </div>
                </div>
              </van-col>
            </van-row>
          </template>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// 1.九类2.分类商品3.具体一个商品
import {
  requestNewproTable,
  requestNewproTableCategory,
  requestNewproOne,
} from "@/api/newpro.js";
export default {
  data() {
    return {
      dataCatogerylist: [],
      active: 2,
      container: null,
      datatable: [],
      isLoading: false,
      count: 0,
      time: 30 * 60 * 60 * 1000,
    };
  },
  async created() {
    let res = await requestNewproTable();
    let data = res.data;
    let { resultCode, resultInfo } = data;
    if (resultCode == 1) {
      this.datatable = resultInfo.list;
    }
    this.onCatogerylist(3);
  },
  mounted() {
    this.container = this.$refs.container;
  },
  methods: {
    getDetail(id) {
      this.$router.push({ path: `/detail?id=${id}` });
    },
    async onCatogerylist(id) {
      let res = await requestNewproTableCategory(id);
      let data = res.data;
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        this.dataCatogerylist = resultInfo.list;
      }
    },
    // 一个方法
    async onRequestOne(id) {
      let res = await requestNewproOne(id);
      let data = res.data;
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        return resultInfo;
      }
    },
    onClickTables(id) {
      this.onCatogerylist(id);
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        let rdom = Math.floor(Math.random() * 9 + 1);
        console.log("随机数random>>>", rdom);
        this.onCatogerylist(rdom);
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    // 一个点击
    async updatecart(id) {
      console.log("ddd>>>", "id=", id); //加入购物车
      let resOne = await this.onRequestOne(id);
      let cartList = this.$store.getters.cartList;
      let oldpro = cartList.find((item) => item.id == id);
      if (oldpro) {
        oldpro.num++;
        this.$toast.success("已存在数量+1");
      } else {
        let product = {
          id: resOne.id,
          name: resOne.product,
          price: resOne.price,
          oldPrice: resOne.oldprice,
          url: resOne.picture,
          desc: resOne.detail,
          num: 1,
          state: false,
        };
        this.$store.dispatch("addCart", product);
        this.$toast.success("新添加到购物车" + id);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.van-col--11 {
  height: 300px;
  margin: 6px;
  border-radius: 22px;
}
.newpro-item {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.redtime {
  color: rgb(240, 156, 156);
  font-size: 18px;
}
.redpre {
  color: rgb(238, 157, 247);
  font-size: 18px;
}

.van-card__price {
  color: red;
}
.van-card__thumb {
  margin: 0px auto;
  width: 150px;
  height: 150px;
}
.van-card {
  border-radius: 22px;
}
.van-card__header {
  flex-direction: column;
}
</style>
